<!DOCTYPE html>
<html lang="en">
<base href="/FirstWeb/WebPages/chapter09/system/src/">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap核心CSS文件 -->
    <link href="../res/css/bootstrap.min.css" rel="stylesheet">
    <title>用户管理</title>
    <style>
	body{
		
	}
	table{
		width: 1200px;
		position: fixed;
		margin: 0 0;
		vertical-align: bottom;
    	border-bottom: 1px solid #ddd;
    	border-spacing: 10px;
    	border-collapse: separate;
    	left: 20%;
    	top: 25%;
    	text-align: center;
	}
	th,td{
		border: 3px solid #fff;
	}
	a{
		text-decoration: none;
		display: inline-block;
		padding: 5px 10px;
		border-radius: 5px;
		background-color:rgb(50, 60, 100, 0.5);
		color:rgb(80, 80, 80, 0.8);
		font-weight: 900;
	}
	.footer{
	widows: 100%;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background: #7a9cea;
	color: #444;
}
</style>
<!-- vue框架： 视图的双向绑定 -->
<script type="text/javascript" src="js/vue-2.6.10.js"></script>
<!--  axios: 进行异步请求（数据来源与网页脱离） -->
<script type="text/javascript" src="js/axios.js"></script>
</head>

<body >
	<h1>用户界面</h1>
	<table id="app">
		<thead>
			<tr>
				<th>id</th>
				<th>用户名</th>
				<th>密码</th>
				<th>年龄</th>
				<th>性别</th>
				<th>QQ号</th>
				<th>微信号</th>
				<th>邮箱</th>
				<th>手机号</th>
				<th>头像</th>
				<th>地址</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="u in users">
				<td>{{u.id}}</td>
				<td>{{u.username}}</td>
				<td>{{u.password}}</td>
				<td>{{u.age}}</td>
				<td>{{u.sex}}</td>
				<td>{{u.QQ}}</td>
				<td>{{u.weixin}}</td>
				<td>{{u.email}}</td>
				<td>{{u.phone}}</td>
				<td>{{u.photo}}</td>
				<td>{{u.address}}</td>
				<td>
					<a :href="'user_update.html?id='+u.id">修改</a>
					<a href="javascript:void(0);"  v-on:click="delUser(u.id)">删除</a>
				
					<a :href="'user_find.html?id='+u.id">找回</a>
					<a :href="'user_delete.html?id='+u.id">注销</a>
				</td>
			</tr>
			
		</tbody>
	</table>
	<div class="footer">疯狂购官网  网页备案号：#23256352 | 🈵🈵🪷🎈</div>
	<script type="text/javascript">
		let vue = new Vue({
			el: '#app',
			data:{
				users: []
			},
			created(){
				//url: 表示异步请求地址
				axios.get('/FirstWeb/selectUser.do').then(
					function(res_obj){
						//使用获取的数据来给vue对象中的users数据赋值
						vue.users = res_obj.data; 
					}
				).catch(
					function(error_obj){
						alert("网络加载异常！！！");
					}
				)
			},
			methods:{
				delUser: function(id){
					console.log(id);
					//url: 表示异步请求地址
					axios.get('/FirstWeb/deleteUser.do?id=' + id).then(
						function(res_obj){
							//使用获取的数据来给vue对象中的users数据赋值
							vue.users = res_obj.data; 
							window.location.href="page_user.html";
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
				},
				finUser: function(id){
					console.log(id);
					//url: 表示异步请求地址
					axios.get('/FirstWeb/findUser.do?id=' + id).then(
						function(res_obj){
							//使用获取的数据来给vue对象中的users数据赋值
							vue.users = res_obj.data; 
							window.location.href="page_user.html";
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
				},
				
			}
		});
	</script>
</body>
</html>